<template>
  <div class="box">
    <div class="top">
      <span class="gang">|</span>
      <span style="">基础信息</span>
    </div>

    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 一个 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="学校" prop="school">
            <el-select
              style="width: 250px"
              v-model="ruleForm.school"
              placeholder="请选择学校"
            >
              <el-option label="新学道测试学校1" value="1"></el-option>
              <el-option label="新学道测试学校2" value="2"></el-option>
              <el-option label="新学道测试学校3" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 一行三个 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="班级名称" prop="name">
            <el-input
              style="width: 250px"
              v-model="ruleForm.name"
              placeholder="请输入班级名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学段" prop="duan">
            <el-select
              style="width: 250px"
              v-model="ruleForm.duan"
              placeholder="请选择学段"
            >
              <el-option label="小学" value="小学"></el-option>
              <el-option label="初中" value="初中"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年级" prop="grade">
            <el-select
              style="width: 250px"
              v-model="ruleForm.grade"
              placeholder="请选择年级"
            >
              <el-option label="一年级" value="1"></el-option>
              <el-option label="二年级" value="2"></el-option>
              <el-option label="三年级" value="3"></el-option>
              <el-option label="四年级" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 一个 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="班级类型" prop="cstate">
            <el-select
              style="width: 250px"
              v-model="ruleForm.cstate"
              placeholder="请选择班级类型"
            >
              <el-option label="重点班" value="zdb"></el-option>
              <el-option label="实验班" value="syb"></el-option>
              <el-option label="普通班" value="ptb"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="top">
      <span class="gang">|</span>
      <span style="">教师信息</span>
    </div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="班主任" prop="zhu">
            <el-select
              style="width: 250px"
              v-model="ruleForm.zhu"
              placeholder="请选择教师"
            >
              <el-option label="李浩" value="李浩"></el-option>
              <el-option label="王然" value="王然"></el-option>
              <el-option label="张伟" value="张伟"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="副班主任" prop="fu">
            <el-select
              style="width: 250px"
              v-model="ruleForm.fu"
              placeholder="请选择教师"
            >
              <el-option label="李浩" value="李浩"></el-option>
              <el-option label="王然" value="王然"></el-option>
              <el-option label="张伟" value="张伟"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item label="任课教师" prop="ke">
            <el-select
              style="width: 250px"
              v-model="ruleForm.ke"
              placeholder="请选择教师"
            >
              <el-option label="数学" value="数学"></el-option>
              <el-option label="英语" value="英语"></el-option>
              <el-option label="语文" value="语文"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item prop="ren">
            <el-select
              style="width: 250px; margin-left: 30px"
              v-model="ruleForm.ren"
              placeholder="请选择教师"
            >
              <el-option label="李浩" value="李浩"></el-option>
              <el-option label="王然" value="王然"></el-option>
              <el-option label="张伟" value="张伟"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="but">
        <el-button type="primary" plain size="medium"
          >语文 李浩 <i class="el-icon-close"></i
        ></el-button>
        <el-button type="primary" plain size="medium"
          >数学 王浩 <i class="el-icon-close"></i
        ></el-button>
        <el-button type="primary" plain size="medium"
          >英语 梦婷 <i class="el-icon-close"></i
        ></el-button>
        <el-button type="primary" plain size="medium"
          >历史 王晓冉 <i class="el-icon-close"></i
        ></el-button>
      </div>
    </el-form>
    <div class="top">
      <span class="gang">|</span>
      <span style="">学生信息</span>
    </div>
    <div class="text">
      <i
        class="el-icon-circle-plus-outline"
        style="font-size: 30px; color: #409eff"
      ></i
      ><span style="color: #409eff; font-size: 16px; margin-right: 10px"
        >添加学生</span
      >
      <el-dropdown>
        <span
          style="
            color: #409eff;
            font-size: 16px;
            display: flex;
            align-items: center;
          "
          ><i
            class="el-icon-upload2"
            style="font-size: 30px; color: #409eff"
          ></i
          >导入学生</span
        >
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>导入学生名单</el-dropdown-item>
          <el-dropdown-item>下载导入模版</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="table">
        <el-table
      :data="tableData"
      border
      style="width: 100%"
     :show-header="false"
     
    >
      <!-- 动态生成列（每列对应一个学生） -->
      <el-table-column
        v-for="(col, index) in columns"
        :key="index"
        :label="`第${index + 1}列`"
        align="center"
      >
        <template #default="scope">
          <!-- 学生姓名 + 操作按钮 -->
          <div class="cell-content">
            <span class="student-name">{{ scope.row.students[index] }}</span>
            <div class="actions">
               <i class="el-icon-close"></i>
        <i class="el-icon-position"></i>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    
    </div>
    <div class="button">
        <el-button type="primary" plain style="margin-right:20px ;">取消</el-button>
        <el-button type="primary">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        school: "",
        duan: "",
        grade: "",
        cstate: "",
        zhu: "",
        fu: "",
        ke: "",
        ren: "",
      },
      rules: {
        school: [{ required: true, message: "请选择学校", trigger: "change" }],
        name: [
          { required: true, message: "请输入班级名称", trigger: "blur" },
          { min: 4, max: 7, message: "长度在4到7个字符", trigger: "blur" },
        ],
        duan: [{ required: true, message: "请选择学段", trigger: "change" }],
        grade: [{ required: true, message: "请选择年级", trigger: "change" }],
        cstate: [{ required: true, message: "请选择状态", trigger: "change" }],
        zhu: [{ required: true, message: "请选择班主任", trigger: "change" }],
        ke: [{ required: true, message: "请选择任课教师", trigger: "change" }],
      },
      // 表格数据（每行是一个学生数组）
      tableData: [
        { students: ['张浩', '王朝', '李浩', '赵三安', '杨涛', '杨洋', '李志忠'] },
        { students: ['田雨欣', '宋雨琦', '张晓明', '李三宇', '王浩宇', '李玉浩', '张晓明'] },
        { students: ['张浩', '王朝', '李浩', '赵三安', '杨涛', '杨洋', '李志忠'] },
        { students: ['田雨欣', '宋雨琦', '张晓明', '李三宇', '王浩宇', '李玉浩', '张晓明'] },
      ],
      // 列数（与学生数组长度一致）
      columns: new Array(7).fill(0).map((_, i) => i), // 生成7列
    }
    
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  border-radius: 10px;
  height: auto;
  // min-height: 100vh;
  padding: 20px;

  .top {
    display: flex;

    min-height: 42px;
    align-items: center;
    margin-bottom: 20px;
    background-color: #fff;
    .gang {
      color: rgb(17, 81, 244);
      font-size: 30px;
      font-weight: 900;
      margin-right: 30px;
    }
  }

  .but {
    margin: 0 5px 10px 100px;
  }
  .text {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
  }
  .table {
    margin-bottom: 100px;
   .cell-content{
   
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:8px;
 
   }
   .student-name{
    font-size: 16px;
    color: #090909;

   }
   .actions {
  display: flex;
  gap: 4px;
  color: rgb(78, 167, 245);
  font-size: 18px;
margin-right: 30px;
}
.el-button--mini {
  padding: 2px 6px;
}

  }

}
</style>
